<!DOCTYPE html>
<html>
<head>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" media="all">
  <script type="text/javascript" src="/static/layui/layui.js"></script>
  <style type="text/css">
    .header span{background:#009688;margin-left:30px;padding:10px;color:#ffffff;}
    .header div{border-bottom:solid 2px #009688;margin-top: 8px;}
    .header button{float:right;margin-top:-5px;}
    .logo-container {
      display: flex;
      gap: 20px;
      margin-bottom: 20px;
      padding-left: 110px;  /* 与layui-form-label的宽度相同 */
    }
    .logo-item {
      flex: 1;
      padding: 15px;
      border: 1px solid #e6e6e6;
      border-radius: 2px;
      background: #fff;
    }
    .logo-item .layui-form-label {
      width: 100%;
      text-align: left;
      padding: 9px 0;
      margin-bottom: 10px;
      border-bottom: 1px solid #f0f0f0;
      line-height: 20px;
      font-size: 14px;
      color: #333;
    }
    .logo-item .layui-input-block {
      margin-left: 0;
    }
    .logo-item img {
      margin-bottom: 10px;
      display: block;
    }
  </style>
</head>
<body style="padding:10px; box-sizing: border-box;">
<form class="layui-form">
  <div class="logo-container">
    <div class="logo-item">
      <label class="layui-form-label">网站icon</label>
      <div class="layui-input-block">
        <div id="iconv">
          <img src="/favicon.ico"  style="max-width: 196px">
        </div>
        <button type="button" class="layui-btn" id="icon">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
      </div>
    </div>
    
    <div class="logo-item">
      <label class="layui-form-label">大logo 建议高80px</label>
      <div class="layui-input-block">
        {if(empty($finds['logo1']))}
        <div class="layui-hide" id="logo1v">
          <img src="" style="max-width: 196px">
        </div>
        <div class="layui-hide">
          <input type="text" class="layui-input" name="logo1" value="">
        </div>
        {else/}
        <div id="logo1v">
          <img src="{$finds['logo1']}"  style="max-width: 196px">
        </div>
        <div class="layui-hide">
          <input type="text" class="layui-input" name="logo1" value="{$finds['logo1']}">
        </div>
        {/if}
        <button type="button" class="layui-btn" id="logo1">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
      </div>
    </div>
    
    <div class="logo-item">
      <label class="layui-form-label">小logo 建议 80x80px</label>
      <div class="layui-input-block">
        {if(empty($finds['logo2']))}
        <div class="layui-hide" id="logo2v">
          <img src="" style="max-width: 196px">
        </div>
        <div class="layui-hide">
          <input type="text" class="layui-input" name="logo2" value="">
        </div>
        {else/}
        <div id="logo1v">
          <img src="{$finds['logo2']}"  style="max-width: 196px">
        </div>
        <div class="layui-hide">
          <input type="text" class="layui-input" name="logo2" value="{$finds['logo2']}">
        </div>
        {/if}
        <button type="button" class="layui-btn" id="logo2" >
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">标题</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" name="title" value="{$finds['title']}">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">公告</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" name="notice" value="{$finds['notice']}" placeholder="只在PC端显示">
    </div>
  </div>
<!--   <div class="layui-form-item">
    <label class="layui-form-label">图标源</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" name="icon" value="{$finds['icon']}" placeholder="图标提取api">
    </div>
  </div> -->
  <div class="layui-form-item">
    <label class="layui-form-label">加密密码</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" name="password" value="{$finds['password']}" placeholder="加密密码，前端输入此密码后，才会显示加密的分类和翻译按钮">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">百度翻译</label>
    <div class="layui-input-block" style="display: flex; gap: 30px;">
      <div>
        <input type="checkbox" name="baidu_translate_show" lay-skin="switch" lay-text="显示|隐藏" lay-filter="baiduShowSwitch" {if(empty($finds['baidu_translate_show']) || $finds['baidu_translate_show']==0)}checked{/if}>
        <input type="hidden" name="baidu_translate_show_value" value="{$finds['baidu_translate_show']|default='0'}" id="baiduShowValue">
      </div>
      <div>
        <input type="checkbox" name="baidu_translate_encrypt" lay-skin="switch" lay-text="公开|加密" lay-filter="baiduEncryptSwitch" {if(empty($finds['baidu_translate_encrypt']) || $finds['baidu_translate_encrypt']==0)}checked{/if}>
        <input type="hidden" name="baidu_translate_encrypt_value" value="{$finds['baidu_translate_encrypt']|default='0'}" id="baiduEncryptValue">
      </div>
      <div style="line-height: 38px;">
        <a href="https://fanyi-api.baidu.com/api/trans/product/desktop" target="_blank" class="layui-btn layui-btn-primary layui-border-blue">申请百度翻译</a>
      </div>
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">APP ID</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" name="baidu_app_id" value="{$finds['baidu_app_id']}" placeholder="请输入百度翻译APP ID">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">密钥</label>
    <div class="layui-input-block">
      <input type="text" class="layui-input" name="baidu_secret_key" value="{$finds['baidu_secret_key']}" placeholder="请输入百度翻译密钥">
    </div>
  </div>

  <div class="layui-form-item">
    <label class="layui-form-label">底部代码</label>
    <div class="layui-input-block">
      <textarea type="text" id="footer" name="footer" placeholder="网页底部代码" class="layui-textarea"></textarea>
    </div>
  </div>
</form>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button type="button" class="layui-btn" onclick="save()">修改</button>
  </div>
</div>
<!-- 隐藏读取底部代码 -->
<div id="myfooter" style="display: none">{$finds['footer']}</div>

<script type="text/javascript">
  layui.use(['form','upload'],function(){
    form = layui.form;
    $ = layui.jquery;
    upload = layui.upload;

    // 监听百度翻译显示开关的切换
    form.on('switch(baiduShowSwitch)', function(data){
      // 如果开关打开，设置值为0（显示），否则为1（隐藏）
      $('#baiduShowValue').val(this.checked ? 0 : 1);
    });
    
    // 监听百度翻译加密开关的切换
    form.on('switch(baiduEncryptSwitch)', function(data){
      // 如果开关打开，设置值为0（公开），否则为1（加密）
      $('#baiduEncryptValue').val(this.checked ? 0 : 1);
    });

    var upicon=upload.render({
      elem: '#icon',
      url: '/admin/upicon/',
      done: function(res){
        //上传完毕回调
        if (res.code==0) {
          layer.msg(res.msg,{"icon":1});
          setTimeout(function () {
            $('#iconv').find('img').attr('src', "/favicon.ico");
          },1000)
        } else {
          layer.msg(res.msg,{"icon":2});
        }

      },
      error: function(){
        //请求异常回调
      }
    });
    var upload1=upload.render({
      elem: '#logo1',
      url: '/admin/uplogo/',
      accept:'images',
      acceptMime: 'image/*',
      done: function(res){
        //上传完毕回调
        if (res.code==0) {
          layer.msg(res.msg,{"icon":1});
          setTimeout(function () {
            $('#logo1v').removeClass('layui-hide').find('img').attr('src', res.imgPath);
            $("[name='logo1']").attr('value', res.imgPath);
          },1000)
        } else {
          layer.msg(res.msg,{"icon":2});
        }

      },
      error: function(){
        //请求异常回调
      }
    });
    var upload2=upload.render({
      elem: '#logo2',
      url: '/admin/uplogo/',
      accept:'images',
      acceptMime: 'image/*',
      done: function(res){
        //上传完毕回调
        if (res.code==0) {
          layer.msg(res.msg,{"icon":1});
          setTimeout(function () {
            $('#logo2v').removeClass('layui-hide').find('img').attr('src', res.imgPath);
            $("[name='logo2']").attr('value', res.imgPath);
          },1000)
        } else {
          layer.msg(res.msg,{"icon":2});
        }

      },
      error: function(){
        //请求异常回调
      }
    });
  });

  function save(){
    $.post(
            "/admin/set",
            $('form').serialize(),//序列化表单
            function(res){
              console.log(res);
              if (res.code==0) {
                layer.msg(res.msg,{"icon":1});
                setTimeout(function () {
                  window.location.reload();
                },1000)
              } else {
                layer.msg(res.msg,{"icon":2});
              }
            }, "json");
  }
  function goto(str){
    let temp = "";
    if(str.length == 0) return "";
    temp = str.replace(/&amp;/g,"&");
    temp = temp.replace(/&lt;/g,"<");
    temp = temp.replace(/&gt;/g,">");
    temp = temp.replace(/&nbsp;/g," ");
    temp = temp.replace(/&#39;/g,"\'");
    temp = temp.replace(/&quot;/g,"\"");
    console.log(temp);
    return temp;
  }
  var myfooter=document.querySelector("#myfooter");
  document.querySelector("#footer").value=goto(myfooter.innerHTML);
  myfooter.remove();
</script>
</body>
</html>